<template>
  <div class="imageAdSet">
    <div class="deco-control-group">
      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">选择模板</div>
          <div class="deco-control-group__value">
            {{ imageTypes[config.show_method] }}
          </div>
        </div>
      </div>
      <div class="deco-control-group-container">
        <el-radio-group v-model="config.show_method" size="medium">
          <el-radio-button :label="0">
            <i class="el-icon-picture"></i>
          </el-radio-button>
          <el-radio-button :label="1">
            <i class="el-icon-picture"></i>
          </el-radio-button>
          <el-radio-button :label="2">
            <i class="el-icon-picture"></i>
          </el-radio-button>
          <el-radio-button :label="3">
            <i class="el-icon-picture"></i>
          </el-radio-button>
          <el-radio-button :label="4">
            <i class="el-icon-picture"></i>
          </el-radio-button>
          <!-- <el-radio-button :label="5">
            <i class="el-icon-picture"></i>
          </el-radio-button> -->
        </el-radio-group>
      </div>
      <div style="padding:0 15px;">
        <div class="title">添加图片</div>
        <p class="deco-help-desc">
          最多添加 10 个广告，鼠标拖拽调整广告顺序，建议宽度750像素,
          高度1000像素以内, 单张图片大小200kb以内
        </p>
      </div>
      <div class="group-wrap">
        <draggable :list="config.sub_entry" class="list-group" :animation="200">
          <div
            class="list-group-item"
            v-for="(item, index) in config.sub_entry"
            :key="index"
          >
            <div class="head-img-wrap">
              <img class="thumb-image" :src="item.image_url" />
            </div>

            <div class="item-content">
              <el-form ref="form" label-width="60px">
                <el-form-item
                  label="标题"
                  class="formItem"
                  style="margin-bottom:10px;"
                >
                  <el-input v-model="item.title" />
                </el-form-item>
                <el-form-item label="链接" class="formItem">
                  <el-input v-model="item.link_url" />
                </el-form-item>
              </el-form>
            </div>

            <div class="item-delete" @click="deleteListItem(index)">
              <i class="el-icon-error"></i>
            </div>
          </div>
        </draggable>

        <div class="addImgBtn">
          <Upload></Upload>
        </div>
      </div>

      <el-divider></el-divider>
      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">一屏显示</div>
        </div>
        <div class="deco-control-group__content">
          <el-radio-group v-model="config.count" size="mini" class="countRadio">
            <el-radio :label="4">4张图片</el-radio>
            <el-radio :label="5">5张图片</el-radio>
            <el-radio :label="6">6张图片</el-radio>
          </el-radio-group>
        </div>
      </div>


      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">图片样式</div>
          <div class="deco-control-group__value">
            {{ config.image_style ? '常规' : '投影' }}
          </div>
        </div>
        <div class="deco-control-group__content">
          <el-radio-group v-model="config.image_style" size="mini">
            <el-radio-button :label="0">
              <i class="el-icon-s-grid"></i>
            </el-radio-button>
            <el-radio-button :label="1">
              <i class="el-icon-s-grid"></i>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">图片倒角</div>
          <div class="deco-control-group__value">
            {{ config.display_scale ? '圆角' : '直角' }}
          </div>
        </div>
        <div class="deco-control-group__content">
          <el-radio-group v-model="config.display_scale" size="mini">
            <el-radio-button :label="0">
              <i class="el-icon-s-grid"></i>
            </el-radio-button>
            <el-radio-button :label="1">
              <i class="el-icon-s-grid"></i>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">页面边距</div>
        </div>
        <div class="deco-control-group__content">
          <el-slider :min="0"
            v-model="config.page_margin"
            style="width:160px;margin-right:10px;"
          ></el-slider>
          <el-input-number
            size="small"
            style="width:60px;"
            v-model="config.page_margin"
            :min="0"
            :controls="false"
          ></el-input-number>
        </div>
      </div>

      <div class="deco-control-group-container" v-if="config.show_method !== 1">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">图片间距</div>
        </div>
        <div class="deco-control-group__content">
          <el-slider :min="0"
            v-model="config.img_margin"
            style="width:160px;margin-right:10px;"
          ></el-slider>
          <el-input-number
            size="small"
            style="width:60px;"
            v-model="config.img_margin"
            :min="0"
            :controls="false"
          ></el-input-number>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import Upload from './upload'

export default {
  components: { Upload, draggable },
  props: ['value'],
  data() {
    return {
      imageTypes: [
        '一行一个',
        '轮播海报',
        '大图横向滑动',
        '小图横向滑动',
        '导航横向滑动',
        '绘制热区'
      ],
      config: this.value ? this.value : {},
      rules: {}
    }
  },
  watch: {
    value(newVal) {
      this.config = newVal
    },
    config(newVal, oldVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    handlePreview() {},
    handleRemove() {},
    beforeRemove() {},
    deleteListItem(index) {
      this.config.sub_entry.splice(index, 1)
    }
  }
}
</script>

<style lang="less">
@import './common.less';
.imageAdSet {
  .group-wrap {
    .addImgBtn {
      box-sizing: border-box;
      position: relative;
      margin-top: 12px;
      padding: 9px 16px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
  .countRadio{
    .el-radio{
      margin-right:10px; 
    }
    
  }
}
</style>
